{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
    .layui-table-view .layui-table thead th {
        background-color: #f2f2f2;
    }
</style>
{/block}

<!-- 主体 -->
{block name="body"}
<div class="p-page">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form toolbar" id="searchForm">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">关键字</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="keywords" placeholder="案件编号或委托人模糊搜索" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">主办律师</label>
                                <div class="layui-input-inline">
                                    <select name="main_lawyer" lay-search>
                                        <option value="">全部</option>
                                        {volist name="adminList" id="vo"}
                                        <option value="{$vo.id}">{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">管家</label>
                                <div class="layui-input-inline">
                                    <select name="secondary_lawyer" lay-search>
                                        <option value="">请选择管家</option>
                                        {volist name="secondaryLawyerList" id="vo"}
                                        <option value="{$vo.id}">{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">案件状态</label>
                                <div class="layui-input-inline">
                                    <select name="status">
                                        <option value="">全部</option>
                                        {volist name="case_status" id="vo"}
                                        <option value="{$vo}">{$vo}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="searchForm">
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary" id="resetBtn">
                                    <i class="layui-icon">&#xe669;</i>清空
                                </button>
                            </div>
                        </div>
                    </form>
                    <table id="lawcaseTable" lay-filter="lawcaseTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

<!-- 脚本 -->
{block name="script"}
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm tool-add" data-href="/lawcase/lawcase/add">+ 添加案件</button>
    </div>
</script>
<script type="text/html" id="column-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
/**
 * 初始化案件列表页面
 * 包含表格渲染、事件监听和表单处理
 */
const moduleInit = ['tool', 'tablePlus'];
function gouguInit() {
    // 使用对象解构简化变量声明
    const { tablePlus: table, form, layer, tool, util } = layui;

    // 渲染表格
    table.render({
        elem: '#lawcaseTable',
        title: '案件列表',
        url: '/lawcase/lawcase/index',
        toolbar: '#toolbar',
        height: 'full-152',
        cellMinWidth: 80,
        page: {
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
            curr: 1
        },
        limit: 10,
        limits: [10, 20, 30, 40, 50],
        cols: [[
            {field: 'case_code', title: '案件编号', width: 150, align: 'center'},
            {field: 'main_lawyer_name', title: '主办律师', width: 100, align: 'center'},
            {field: 'secondary_lawyer_name', title: '管家', width: 100, align: 'center'},
            {field: 'party_names', title: '委托人', width: 120, templet: d => d.party_names?.join(', ') || ''},
            {field: 'opposite_party_names', title: '对方当事人', width: 120, templet: d => d.opposite_party_names?.join(', ') || ''},
            {field: 'case_type', title: '类型', width: 80, align: 'center'},
            {field: 'stage', title: '代理阶段', width: 120, align: 'center'},
            {field: 'case_cause_name', title: '案由', width: 100, align: 'center'},
            {field: 'court_name', title: '管辖法院', width: 150},
            {field: 'session_time', title: '开庭时间', width: 150, align: 'center', 
                templet: d => d.session_time > 0 ? util.toDateString(d.session_time * 1000, 'yyyy-MM-dd HH:mm') : ''},
            {field: 'status', title: '当前进度', width: 200, align: 'center'},
            {field: 'entrust_date', title: '接案日期', width: 100, align: 'center'},
            {field: 'create_time', title: '创建时间', width: 150, align: 'center', 
                templet: d => util.toDateString(d.create_time * 1000, 'yyyy-MM-dd HH:mm:ss')},
            {field: 'update_time', title: '更新时间', width: 150, align: 'center', 
                templet: d => d.update_time > 0 ? util.toDateString(d.update_time * 1000, 'yyyy-MM-dd HH:mm:ss') : util.toDateString(d.create_time * 1000, 'yyyy-MM-dd HH:mm:ss')},
            {title: '操作', width: 170, align: 'center', fixed: 'right', toolbar: '#column-toolbar'}
        ]],
        text: {
            none: '<div class="gg-no-data-tips"><i class="layui-icon layui-icon-face-surprised"></i><p>暂无相关数据</p></div>'
        },
        parseData: res => ({
            "code": res.code,
            "msg": res.msg,
            "count": res.data.total,
            "data": res.data.data
        })
    });

    // 监听表格工具条事件
    table.on('tool(lawcaseTable)', function(obj) {
        const data = obj.data;
        switch(obj.event) {
            case 'view':
                tool.side(`/lawcase/lawcase/view?id=${data.id}`);
                break;
            case 'edit':
                tool.side(`/lawcase/lawcase/edit?id=${data.id}`);
                break;
            case 'del':
                layer.confirm('确定要删除此案件吗？', index => {
                    tool.delete("/lawcase/lawcase/delete", {id: data.id}, res => {
                        layer.msg(res.msg || (res.code === 0 ? '删除成功' : '删除失败'));
                        res.code === 0 && obj.del();
                    });
                    layer.close(index);
                });
                break;
        }
    });

    // 监听表格头部工具栏事件
    table.on('toolbar(lawcaseTable)', function(obj) {
        if(obj.event === 'add') {
            tool.side("/lawcase/lawcase/add", '添加案件');
        }
    });

    // 监听搜索表单提交
    form.on('submit(searchForm)', function(data) {
        table.reload('lawcaseTable', {
            where: data.field,
            page: { curr: 1 }
        });
        return false;
    });

    // 清空按钮事件
    document.getElementById('resetBtn').addEventListener('click', function() {
        // 重置表单并刷新表格
        document.getElementById('searchForm').reset();
        form.render(); // 重新渲染表单，确保下拉框等组件状态同步
        table.reload('lawcaseTable', {
            where: {},
            page: { curr: 1 }
        });
    });
}
</script>
{/block}
